<template>
  <div style="padding: 22px 10px 10px">
    <h4 class="postmtitle">帖子管理</h4>

    <div>
      <div class="postm">
        <div
          style="
            height: auto;
            display: flex;
            box-shadow: 0px 0px 15px -10px gray;
            margin-top: 10px;
          "
        >
          <div class="postPhoto">
            <div>
              <img
                src="https://s1.ax1x.com/2022/07/14/jWxOqP.md.png"
                style="width: 108px; height: 81px"
                alt="jWxOqP.png"
              />
            </div>
          </div>

          <div class="postInfo">
            <li class="postName">标题：<span></span></li>
            <li class="postBiog">发布时间：<span>828190.213</span></li>
          </div>

          <div class="postInfo-state">
            <li class="postName">分区：<span>灌水区</span></li>
            <li class="postBiog">最近一次登陆时间：<span>283018.31</span></li>
          </div>

          <div class="postButton">
            <a-dropdown>
              <template #overlay>
                <a-menu @click="handleMenuClick">
                  <a-menu-item key="1">封禁</a-menu-item>
                  <a-menu-item key="2">解禁</a-menu-item>
                </a-menu>
              </template>
              <a-button>
                操作
                <DownOutlined />
              </a-button>
            </a-dropdown>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
import {
  MailOutlined,
  CalendarOutlined,
  AppstoreOutlined,
  SettingOutlined,
} from "@ant-design/icons-vue";

export default defineComponent({
  components: {
    MailOutlined,
    CalendarOutlined,
    AppstoreOutlined,
    SettingOutlined,
  },

  setup() {
    const state = reactive({
      selectedKeys: [],
      openKeys: [],
    });

    const handleClick = (menuInfo) => {
      console.log("click ", menuInfo);
    };

    return { ...toRefs(state), handleClick };
  },
});
</script>

<style>
.postmtitle {
  font-size: 22px;
  border-left: 3px solid rgba(0, 0, 0, 0.8);
  padding-left: 8px;
  line-height: 16px;
  margin-bottom: 15px;
  font-weight: normal;
  margin-top: 10px;
  text-align: left;
}

.postm {
  padding: 10px 10px 10px;
}

.postPhoto {
  width: 100px;
  height: 100px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.postInfo {
  width: 300px;
  height: 100px;
  padding: 4px;
  list-style-type: none;
  padding: 22px 10px 10px;
}

.postInfo-state {
  width: 500px;
  height: 100px;
  padding: 4px;
  list-style-type: none;
  padding: 22px 10px 10px;
}

.postName {
  color: #000;
  font-size: 14px;
  font-weight: normal;
  margin-right: -2px;
  overflow: hidden;
  vertical-align: -2px;
}

.postBiog {
  color: #000;
  font-size: 14px;
  margin-top: 10px;
  line-height: 18px;
}

.postButton {
  display: flex;
  align-items: center;
  padding: 10px 0px 10px;
  margin-right: 15px;
}
</style>